<template>
  <el-card shadow="hover" class="mt-20">
    <el-form>
      <el-form-item label="属性名">
        <el-input
          placeholder="请输入属性名"
          class="attr-input"
          size="small"
          v-model="formData.attrName"
        ></el-input>
        <el-button
          type="primary"
          size="small"
          :disabled="!formData.attrName"
          @click="addAttrValueItem"
          ><i class="el-icon-plus"></i> 添加属性值</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-table :data="formData.attrValueList" border>
          <el-table-column
            label="序号"
            type="index"
            width="60px"
            align="center"
          ></el-table-column>
          <el-table-column label="属性值名称">
            <template v-slot="{ row, $index }">
              <el-input
                v-if="row.isEdit"
                ref="inputRef"
                size="small"
                v-model="row.valueName"
                @blur="isView(row, $index)"
              ></el-input>
              <div v-else @click="isEdit(row)">{{ row.valueName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150px" align="center">
            <template v-slot="{ $index }">
              <el-button
                class="el-icon-delete"
                type="danger"
                size="small"
                @click="deleteAttrValue($index)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <template>
          <el-button type="primary" size="small" @click="addOrUpdateAttr"
            >保存</el-button
          >
          <el-button size="small" @click="goAttrList">取消</el-button>
        </template>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "AddOrUpdateAttr",
  data() {
    return {
      formData: {
        // attrName: "",
        // attrValueList: [],
        // categoryId: 0,
        // categoryLevel: 3,
      },
    };
  },
  methods: {
    ...mapMutations("attr", ["RESET_ATTRITEM"]),
    // 保存按钮
    async addOrUpdateAttr() {
      if (!this.formData.attrValueList.length) {
        this.$message.error("添加失败，请至少添加一个属性值");
      } else {
        const params = {
          ...this.formData,
          categoryId: this.category3Id,
        };
        await this.$api.addOrUpdateAttr(params);
        this.$message.success(`${this.formData.id ? "修改" : "添加"}成功`);
        this.goAttrList();
      }
    },
    // 添加一个属性值名称
    addAttrValueItem() {
      this.formData.attrValueList.push({
        isEdit: true,
        valueName: "",
      });
      this.$nextTick(() => {
        this.$refs.inputRef.focus();
      });
    },
    // 删除一个属性值
    deleteAttrValue(index) {
      this.formData.attrValueList.splice(index, 1);
    },
    // 切换到显示模式
    isView(row, index) {
      if (row.valueName) {
        row.isEdit = false;
      } else {
        this.formData.attrValueList.splice(index, 1);
      }
    },
    // 切换到显示模式
    isEdit(row) {
      row.isEdit = true;
      this.$nextTick(() => {
        this.$refs.inputRef.focus();
      });
    },
    // 跳转到属性列表页面
    goAttrList() {
      this.$emit("updateIsShow", "AttrList");
      this.RESET_ATTRITEM()
    },
  },
  mounted() {
    this.formData = {
      ...this.attrItem,
      attrValueList: this.attrItem.attrValueList.map((item) => {
        // 这样添加isEdit，不是一个响应式数据
        // item.isEdit = false;
        // 必须写成这种格式 isEdit 才是响应式数据
        return { ...item, isEdit: false };
      }),
    };
  },
  computed: {
    ...mapState("category", ["category3Id"]),
    ...mapState("attr", ["attrItem"]),
  },
};
</script>

<style lang="scss" scoped>
.mt-20 {
  margin-top: 20px;
}
.attr-input {
  width: 200px;
  margin-right: 20px;
}
</style>
